<template>
    <header>
        <div class="inner">
          <h1 class="logo">
            <img src='../assets/images/logo.png'/>
          </h1>
        <nav>
          <ul>
            <li v-for="(item, index) in nav" @click='active(item, index)' :class='index==activeSty?"activeSty":""' :key='index'>
              <router-link tag='a' :to='item.code' >
                {{item.text}}
              </router-link>
            </li>
            <li>全国服务热线：{{tel}}</li>
          </ul>
        </nav>
        <div class="tel">
        </div>
        </div>
    </header>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      nav: [
        {
          text: '首页',
          code: 'index'
        },
        {
          text: '关于昆特',
          code: 'gykt'
        },
        {
          text: '新闻资讯',
          code: 'xwzx'
        },
        {
          text: '行业应用',
          code: 'hyyy'
        },
        {
          text: '产品中心',
          code: 'cpzx'
        },
        {
          text: '经典案例',
          code: 'jdal'
        },
        {
          text: '服务支持',
          code: 'fwzc'
        }
      ],
      tel: '400-716-5998',
      activeSty: 0
    }
  },
  methods: {
    active (item, index) {
      this.activeSty = index
      this.toTop()
    },
    toTop () {
      document.documentElement.scrollTop = document.body.scrollTop = 0
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
  header{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background: rgba(0, 0, 0, .6);
    width: 100%;
    min-width: 1200px;
    .inner{
      width: 1200px;
      margin: 0 auto;
      height: 85px;
      overflow: hidden;
      h1{
        width: 148px;
        height: 60px;
        float: left;
        margin-top: 12px;
        img{
          width: 148px;
          height: 60px;
        }
      }
      nav{
        float: left;
        margin-left: 20px;
        ul{
          overflow: hidden;
          line-height: 85px;
          li{
            margin-left: 48px;
            float: left;
            color: #D3D3D3;
            font-size: 16px;
            font-weight: Medium;
            a{
              display:inline-block;
              line-height: 40px;
              color: #D3D3D3;
            }
            &:not(:last-child):hover {
              cursor:pointer;
              &:hover{
                color: #ffffff;
                font-weight: bold;
                border-bottom:solid 4px #4EBDD5;
              }
            }
            &.activeSty{
              a{
                color: #ffffff;
                font-weight: bold;
                border-bottom:solid 4px #4EBDD5;
              }
            }
          }
        }
      }
    }
  }
</style>
